<template>
  <div class="chart7">
    <div id="chart7">

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts-gl');

export default {
  name: 'HelloWorld',
  data () {
    return {
option:{}
    }
  },
  mounted() {
    this.getMusic()
    this.init()
  },
  methods: {
    init(){
      var box = echarts.init(document.getElementById('chart7'));
      box.setOption(this.option);
    },
    getMusic(){
        var UPDATE_DURATION = 100;

        window.AudioContext = window.AudioContext || window.webkitAudioContext;

        var audioContext = new AudioContext();

        var oReq = new XMLHttpRequest();
        oReq.open('GET', 'http://localhost:8081/asset/away.mp3', true);
        oReq.responseType = 'arraybuffer';

        oReq.onload = function(e) {
            audioContext.decodeAudioData(oReq.response, initVisualizer);
        };
        oReq.send();
        var box = echarts.init(document.getElementById('chart7'));
        function initVisualizer(audioBuffer) {
            var inited = true;

            var source = audioContext.createBufferSource();
            source.buffer = audioBuffer;

            // Must invoked right after click event
            if (source.noteOn) {
                source.noteOn(0);
            }
            else {
                source.start(0);
            }

            var analyzer = audioContext.createAnalyser();
            var gainNode = audioContext.createGain();
            analyzer.fftSize = 4096;

            gainNode.gain.value = 1;
            source.connect(gainNode);
            gainNode.connect(analyzer);
            analyzer.connect(audioContext.destination);

            var frequencyBinCount = analyzer.frequencyBinCount;
            var dataArray = new Uint8Array(frequencyBinCount);


            var beta = 0;
            
            function update() {
                analyzer.getByteFrequencyData(dataArray);

                var item = [];
                var size = 50;
                var dataProvider = [];

                for (var i = 0; i < size * size; i++) {
                    var x = i % size;
                    var y = Math.floor(i / size);
                    var dx = x - size / 2;
                    var dy = y - size / 2;

                    var angle = Math.atan2(dy, dx);
                    if (angle < 0) {
                        angle = Math.PI * 2 + angle;
                    }
                    var dist = Math.sqrt(dx * dx + dy * dy);
                    var idx = Math.min(
                        frequencyBinCount - 1, Math.round(angle / Math.PI / 2 * 60 + dist * 60) + 100
                    );

                    var val = Math.pow(dataArray[idx] / 100, 3);
                    dataProvider.push([x, y, Math.max(val, 0.1)]);
                }
                box.setOption({
                    grid3D: {
                        viewControl: {
                            beta: beta,
                            alpha: Math.sin(beta / 10 + 40) * (beta % 10 + 5) / 15 * 30 + 30,
                            distance: Math.cos(beta / 50 + 20) * (beta % 10 + 5) / 15 * 50 + 80,
                            animationDurationUpdate: UPDATE_DURATION,
                            animationEasingUpdate: 'linear'
                        }
                    },
                    series: [{
                        data: dataProvider
                    }]
                });
                beta += 2;

                setTimeout(update, UPDATE_DURATION);
            }

            update();
        }

        this.option = {
            tooltip: {},
            visualMap: {
                show: false,
                min: 0.1,
                max: 4,
                inRange: {
                    color: ['#010103', '#2f490c', '#b0b70f', '#fdff44', '#fff']
                }
            },
            xAxis3D: {
                type: 'value'
            },
            yAxis3D: {
                type: 'value'
            },
            zAxis3D: {
                type: 'value',
                min: -6,
                max: 6
            },
            grid3D: {
                show: false,
                environment: '#000',
                viewControl: {
                    distance: 100
                },
                postEffect: {
                    enable: true,
                    FXAA: {
                        enable: true
                    }
                },
                light: {
                    main: {
                        shadow: true,
                        intensity: 10,
                        quality: 'high'
                    },
                    ambientCubemap: {
                        texture: 'data-gl/asset/canyon.hdr',
                        exposure: 0,
                        diffuseIntensity: 0.2
                    }
                }
            },
            series: [{
                type: 'bar3D',
                silent: true,
                shading: 'lambert',
                data: [],
                barSize: 1,
                lineStyle: {
                    width: 4
                },
                // animation: false,
                animationDurationUpdate: UPDATE_DURATION
            }]
        }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.chart7{
  width:100%;
  height:100vh;
  
}
#chart7{
    width:100%;
    height:100%;
  }
</style>
